<template>
    <div class="running">

        <h3>下载中</h3>
        <v-table
                class="downloading"
                :emotion="'info'"
                :headers="['title', 'id','format','proxy', 'startTime', 'operation' ,'log']"
                :rows-size="running.length"
        >
            <template #header-id>视频id</template>
            <template #header-format>编码</template>
            <template #header-title>标题</template>
            <template #header-proxy>代理</template>
            <template #header-startTime>任务发起时间</template>
            <template #header-operation>操作</template>
            <template #header-log>日志</template>

            <template #row-id="{ header, index }">
                {{ running[index][header]}}
            </template>

            <template #row-format="{ header, index }">
                {{ running[index][header] }}
            </template>

            <template #row-proxy="{ header, index }">
                {{ running[index][header] }}
            </template>

            <template #row-title="{ header, index }">
                {{ running[index][header] }}
            </template>

            <template #row-startTime="{ header, index }">
                {{ formatDate(running[index][header]) }}
            </template>

            <template #row-log="{ header,index }">
                {{ running[index][header] }}
            </template>

            <template #row-operation="{index}">
                <a title="历史日志" @click="showLog(running[index])" class="iconfont icon-log"/>
                <a title="停止" @click="stopTask(running[index])" class="iconfont icon-stop"/>
            </template>
        </v-table>

        <h3>排队中</h3>
        <v-table
                :emotion="'info'"
                :headers="['title', 'id', 'format', 'proxy', 'startTime']"
                :rows-size="waiting.length"
        >
            <template #header-id>视频id</template>
            <template #header-format>编码</template>
            <template #header-proxy>代理</template>
            <template #header-title>标题</template>
            <template #header-startTime>任务发起时间</template>

            <template #row-id="{ header, index }">
                {{ waiting[index][header]}}
            </template>

            <template #row-format="{ header, index }">
                {{ waiting[index][header] }}
            </template>

            <template #row-proxy="{ header, index }">
                {{ waiting[index][header] }}
            </template>

            <template #row-title="{ header, index }">
                {{ waiting[index][header] }}
            </template>

            <template #row-startTime="{ header, index }">
                {{ formatDate(waiting[index][header]) }}
            </template>

        </v-table>

        <h3>已中断</h3>
        <v-table
                :emotion="'warning'"
                :headers="['title','id','format', 'proxy', 'startTime', 'endTime','operation']"
                :rows-size="interrupt.length"
        >
            <template #header-id>视频id</template>
            <template #header-format>编码</template>
            <template #header-proxy>代理</template>
            <template #header-title>标题</template>
            <template #header-endTime>中断时间</template>
            <template #header-startTime>任务发起时间</template>
            <template #header-operation>操作</template>

            <template #row-id="{ header, index }">
                {{ interrupt[index][header]}}
            </template>

            <template #row-format="{ header, index }">
                {{ interrupt[index][header] }}
            </template>

            <template #row-proxy="{ header, index }">
                {{ interrupt[index][header] }}
            </template>

            <template #row-title="{ header, index }">
                {{ interrupt[index][header] }}
            </template>

            <template #row-startTime="{ header, index }">
                {{ formatDate(interrupt[index][header]) }}
            </template>

            <template #row-endTime="{ header, index }">
                {{ formatDate(interrupt[index][header]) }}
            </template>

            <template #row-operation="{index}">
                <a title="重试" class="iconfont icon-recover" @click="retryTask(interrupt[index])"/>
                <a title="历史日志" class="iconfont icon-log" @click="showLog(interrupt[index])"/>
                <a title="删除" class="iconfont icon-delete" @click="deleteInterrupt(interrupt[index])"/>
            </template>
        </v-table>

        <log-dialog :show="logDialog.show" @close=" () => logDialog.show = false " :msg="logDialog.logMsg"/>
    </div>
</template>

<script>
    import FComponents from 'f-vue-components';
    import TaskService from "../script/api/TaskService";
    import FUtils from 'fo-utils';
    import LogService from "../script/api/LogService";
    import LogDialog from "../components/LogDialog.vue";

    const ArrayUtils = FUtils.ArrayUtils;
    const StringUtils = FUtils.StringUtils;

    export default {
        name: "Running",
        components: {
            "v-table": FComponents.Table,
            "v-dialog": FComponents.Dialog,
            LogDialog,
        },
        data() {
            return {
                running: [],
                waiting: [],
                interrupt: [],
                logDialog: {
                    show: false,
                    logMsg: ''
                },
                listenStatus: null,
            };
        },
        methods: {
            showLog(task) {
                LogService.logs(task.id, task.format)
                    .then(log => {
                        this.logDialog.logMsg = log;
                        this.logDialog.show = true;
                    });
            },
            retryTask(task) {
                TaskService.retryTask(task.id, task.format)
            },
            stopTask(task) {
                TaskService.stopTask(task.id, task.format)
            },
            deleteInterrupt(task) {
                TaskService.deleteTaskInterrupt(task.id, task.format).then(() => {
                    this.refresh();
                });
            },
            refresh() {
                this.destroyAllLogSocket();
                this.loadDownloadStatus();
            },
            loadDownloadStatus() {
                return TaskService.getDownloadingStatus()
                    .then(data => {
                        data.running.forEach(task => {
                            task.log = '';
                            task.socket = LogService.log(task.id, task.format, message => {
                                task.log = message;
                            });
                        });
                        ArrayUtils.copy(data.running, this.running);
                        ArrayUtils.copy(data.waiting, this.waiting);
                        ArrayUtils.copy(data.interrupt, this.interrupt);
                    });
            },
            destroyAllLogSocket() {
                this.running.forEach(task => {
                    task.socket.close();
                });
            },
            destroyAllSocket() {
                this.listenStatus.close();
                this.destroyAllLogSocket();
            },
            formatDate(time) {
                let dt = new Date(time);
                return dt.getFullYear() +
                    '-' + StringUtils.fixLength(dt.getMonth() + 1, 2, '0') +
                    '-' + StringUtils.fixLength(dt.getDate() + 1, 2, '0') +
                    ' ' + StringUtils.fixLength(dt.getHours(), 2, '0') +
                    ':' + StringUtils.fixLength(dt.getMinutes(), 2, '0') +
                    ':' + StringUtils.fixLength(dt.getSeconds(), 2, '0');
            }
        },
        computed: {},
        created() {
            this.loadDownloadStatus();
            this.listenStatus = TaskService.listenStatus(() => {
                this.refresh();
            });
        },
        beforeDestroy() {
            this.destroyAllSocket();
        }
    }
</script>

<style lang="less">
    div.running {
        h3 {
            margin-top: 1rem;
        }

        .table {
            .table-header {
                .row {
                    .cell {
                        padding: 0.7rem 0.625rem;
                    }
                }
            }

            .row {
                .cell {
                    overflow-x: scroll;
                    padding: 0.3125rem 0.625rem;

                    &.cell {
                        &-id {
                            flex: none;
                            width: 9rem;
                        }

                        &-format {
                            flex: none;
                            width: 6rem;
                        }

                        &-title {
                            flex: none;
                            width: 60rem;
                        }

                        &-proxy {
                            flex: none;
                            width: 13rem;
                        }

                        &-endTime {
                            flex: none;
                            width: 11rem;
                        }

                        &-startTime {
                            flex: none;
                            width: 11rem;
                        }

                        &-log {
                            width: 40rem;
                            flex: none;
                        }

                        &-operation {
                            a {
                                font-size: 1.5rem;
                                cursor: pointer;
                                margin-right: 5px;
                            }

                            width: 7rem;
                            flex: none;
                        }
                    }
                }
            }
        }
    }


</style>